<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String contextPath = request.getContextPath();
%> 
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">

.tabtable{
		width:256;
		cellpadding:0; 
		cellspacing:0;
	}

.dd{
	background-color:transparent;
	background: transparent;
	padding-top:0;
}


#clock {
	width: 320px;
	height: 320px;
	margin:0;
	padding:0;
	position: relative;
	top: 80px;
	left: 110px;
}

.rotatingHands {
	position: absolute;
	width: 320px;
	height: 320px;
	top: 0px;
	left: 0px;
}

#hours, #minutes, #seconds {
	position: absolute;
	display: block;
}

.glass {
	position: absolute;
	width: 320px;
	height: 320px;
	top: 0px;
	left: 0px;
}


#back-top {
 position: fixed;
 bottom: 100px; /* 부라우저 밑에서 위로 떨어질 높이설정  */
 left: 90%;
 margin:0px;  /* 부라우저 중앙에서 우측으로 떨어질 거리설정  */
 z-index:999;
 display:none;
}


.rc_title {font-size:24px;font-weight:800;color:#fff; letter-spacing:0.2em; display:block;padding:60px 0 0 30px;
	text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.20);
    -moz-text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.20);
    -webkit-text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.20);
}
.rc_title a{color:#fff;text-decoration:none}

#tabs
{
  overflow: auto;
  width: 100%;
  list-style: none;
  margin: 10px 0 0 30px;
  padding: 0;
  opacity: .7; 
  /* For IE 5-7 */
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  /* For IE 8 */
  -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}

#tabs li
{
    margin: 0;
    padding: 0;
    float: left;
}

#tabs a
{
    background: #fff;
    color: #a1a1a1;
    float: left;
    font: bold 13px/32px 'Nanum Gothic';
    width:70px;
	height: 32px;
    padding: 0 30px;
    text-decoration: none;
	text-align:center
}

#tabs a:hover
{
    background: #c1454a;
	color:#fff;
 }

#tabs a:focus
{
    outline: 0;
}

#tabs #current a
{
    background: #c1454a;
    color: #fff;
}

#tab_content
{
    width:260px;
	padding: 30px;
	color:#fff;
}

#tab_content div, #tab_content div.it
{
    height: 115px !important;margin:0;padding:0
}
</style>


<script type="text/javascript">
//배경화면 
$(document).ready(function(){
	$('#wrapper').css('background', 'url(image/overlays/01.png) repeat center top transparent');
	$.backstretch([
	  'image/main/main01.gif',  
	  'image/main/main02.gif',
	  'image/main/main03.gif'
	  ], {
		fade: 550,
		duration: 5000
	});
});
</script>

<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.backstretch.min.js"></script>
<link rel="stylesheet" type="text/css" href="../css/main.css"/>

<link rel="stylesheet" type="text/css" href="../css/all_menu.css"/>
<link rel="stylesheet" type="text/css" href="../css/menu.css"/>
<link rel="stylesheet" type="text/css" href="../css/sub.css"/>
<link rel="stylesheet" type="text/css" href="../css/default.css"/>
<link rel="stylesheet" type="text/css" href="../skin/latest/recommend/style.css">
<link rel="stylesheet" type="text/css" href="../skin/latest/news/style.css">

<script type="text/javascript" src="../js/jquery.backstretch.min.js"></script>
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="../js/jquery.menu.js"></script>
<script type="text/javascript" src="../js/jquery.easing.min.js"></script>
<script type="text/javascript" src="../js/jquery.touchSlider.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/wrest.js"></script>
<script type="text/javascript" src="../js/jquery.reveal.js"></script>
<script type="text/javascript" src="../js/smooth_scroll.js"></script>


<script type="text/javascript" src="../js/jquery.iosslider.min.js"></script>
<script type="text/javascript" src="../js/main.js"></script>
<!-- jQuery Rotate -->
<script type="text/javascript" src="../js/clock/jQueryRotate.2.2.js"></script>
<!-- Functions -->
<script type="text/javascript" src="../js/clock/functions.js"></script>
<script type="text/javascript" src="../js/jquery.vticker.min.js"></script>
<script type="text/javascript" src="../js/mobilyblocks.js"></script>
<script type="text/javascript" src="../js/init.js" ></script>	
<link rel="stylesheet" type="text/css" href="../css/main_roll_img.css">
<link href="../css/sns.css" rel="stylesheet" type="../text/css"/>
<link rel="stylesheet" type="text/css" href="../css/news_box.css">
<link rel="stylesheet" type="text/css" href="../css/icon.css"/>
</head>
<body>

<div id="wrapper1">
	<div id="container">
		<!-- contents box -->
		<section class="mainContArea" id="contents">
		<!-- start 01 -->
			<div class="start" style="position:absolute; z-index:20; left:0px; top:12px;">
				<div id="clock">  
					<div class="rotatingHands"><img id="hours" src="../css/images/hours.png" /></div>
					<div class="rotatingHands"><img id="minutes" src="../css/images/minutes.png" /></div>
					<div class="rotatingHands"><img id="seconds" src="../css/images/seconds.png" /></div>
					<!-- <div class="glass"><img src="images/glass.png" /></div> -->
					<img src="../css/images/clock.png" />
				</div>		
			</div>
			<!-- //start 01 -->

	<!-- visualArea 02 -->
	<div class="visualArea" style="position:absolute; z-index: 19; left: 320px; top:12px;">
	<div class="sliderContainer">
		<div class="iosSlider">
			
			<div class="slider">
				
				<div class="item item1">
					<div class="inner">
						<div class="text1"><span><span style="color:#ff8a00">소셜데이팅과 결혼정보회사가</span> 만나다.</span></div>
						<div class="text4"><span>결혼정보업체 서비스를 부담없이, 간편하게...</span></div>
					</div>
				</div>
				
				<div class="item item2">
					<div class="inner">
						<div class="text1"><span><span style="color:#ff8a00">매칭에서 실제만남까지</span> 보장 !!</span></div>
						<div class="text4"><span>실제 소개팅이 이루어지지 않았을시 100% 환불해 드립니다.</span></div>
					</div>
				</div>
				
				<div class="item item3">
					<div class="inner">
						<div class="text2"><span style="color:#ff8a00;">익명성 철저 보장!</span><br><span style="color:#ff8a00">1:1 맞춤 매칭!</span><br><span style="color:#ff8a00">소개팅 스케줄 관리!</span></div>
						<div class="text4"><span>소개부터 약속시간, 장소까지 한번에 OK~!</span></div>
					</div>
				</div>
				
				<div class="item item4">
					<div class="inner">
						<div class="text3"><span><span style="color:#ff8a00">번호만 교환하고 흐지부지</span> 된 적 있으신가요?<br>다른 서비스로 <span style="color:#ff8a00">마음에 드는 분</span> 만나기 힘드신가요?<br><span style="color:#ff8a00">바쁜 일상속</span>에서 이성 만나기 힘드신가요?</span></div>
						<div class="text4"><span>우리결혼할래요가 모두 해결해드립니다.</span></div>
					</div>
				</div>
				
			</div>
		</div>
		
		<div class="slideSelectors">
			<div class="item selected"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
		</div>

	</div>



<script type="text/javascript">
$(document).ready(function() {
	
	$('.iosSlider').iosSlider({
		desktopClickDrag: true,
		snapToChildren: true,
		navSlideSelector: '.sliderContainer .slideSelectors .item',
		onSlideComplete: slideComplete,
		onSliderLoaded: sliderLoaded,
		onSlideChange: slideChange,
		scrollbar: false,
		autoSlide: true,
		autoSlideTimer: 3000,
    infiniteSlider: true
	});
	
});

function slideChange(args) {
			
	$('.sliderContainer .slideSelectors .item').removeClass('selected');
	$('.sliderContainer .slideSelectors .item:eq(' + (args.currentSlideNumber - 1) + ')').addClass('selected');

}

function slideComplete(args) {
	
	if(!args.slideChanged) return false;
	
	$(args.sliderObject).find('.text1, .text2, .text3, .text4').attr('style', '');
	
	$(args.currentSlideObject).find('.text1').animate({
		left: '0px',
		opacity: '0.8'
	}, 300, 'easeOutQuint');
	
	$(args.currentSlideObject).find('.text2').animate({
		left: '0px',
		opacity: '0.8'
	}, 300, 'easeOutQuint');

	$(args.currentSlideObject).find('.text3').animate({
		left: '0px',
		opacity: '0.8'
	}, 300, 'easeOutQuint');

	$(args.currentSlideObject).find('.text4').delay(200).animate({
		left: '0px',
		opacity: '0.8'
	}, 300, 'easeOutQuint');
	
}

function sliderLoaded(args) {
		
	$(args.sliderObject).find('.text1, .text2, .text3, .text4').attr('style', '');
	
	$(args.currentSlideObject).find('.text1').animate({
		left: '0px',
		opacity: '0.8'
	}, 300, 'easeOutQuint');
	
	$(args.currentSlideObject).find('.text2').animate({
		left: '0px',
		opacity: '0.8'
	}, 300, 'easeOutQuint');

	$(args.currentSlideObject).find('.text3').animate({
		left: '0px',
		opacity: '0.8'
	}, 300, 'easeOutQuint');

	$(args.currentSlideObject).find('.text4').delay(200).animate({
		left: '0px',
		opacity: '0.8'
	}, 300, 'easeOutQuint');
	
	slideChange(args);
	
}
</script>	</div>
	<!-- //visualArea 02 -->

	<!-- movie 10 -->
	<div class="movieArea" style="position:absolute; z-index:20; left:960px; top:160px;">
		<div class="cont">
		<iframe width="320" height="320" src="//www.youtube.com/embed/0-vzJ18N-sI" ></iframe>
<script type="text/javascript"> 
function iFrmReSize() { 
try{ 
var objBody = ifrm.document.body; 
var objFrame = document.all["ifrm"]; 
ifrmHeight = objBody.scrollHeight + (objBody.offsetHeight - objBody.clientHeight); 

objFrame.style.height = ifrmHeight;
objFrame.style.width = '100%'; 
}catch(e){} 
} 
function init_iframe() { 
iFrmReSize(); 
setTimeout("init_iframe()",100); 
}
$(document).ready(function() {
	init_iframe();
});
</script>
</div>  
	</div>
	<!-- //movie 10 -->

	<!-- speeddateArea 04 -->
	<div class="speeddateArea" style="position:absolute; z-index:20; left:0px; top:480px;">
		<div class="cont">
			<a  href="<%=contextPath %>/eventBoard/list.do" style="text-decoration:none;"><ul class="list">
	<li><h1>SPEED<br><span>DATE</span><br>SERVICE</h1></li>
	<li><p>한번의 소개팅 비용으로<br>12명의 이성과 색다른 데이트!!<p></li>
	<a class="lt_more" href="<%=contextPath %>/eventBoard/list.do"><em>View more</em></a>
</ul></a>
		</div>
	</div>
	<!-- //speeddateArea 04 -->

	<!-- priceArea 05 -->
	<div class="priceArea" style="position:absolute; z-index:20; left:320px; top:480px;">
		<div class="cont">
			<div class="boxgrid peek">
	
	<a href="<%=contextPath%>/mainPage/price.do"><img src="../image/main/box05_img.png" width="320" height="320" title="남성회원 3만원"></a>
	<img src="../image/main/box05_img2.png" width="320" height="320" title="여성회원 무료"  class="cover" >
</div>

<script type="text/javascript">
	$(document).ready(function(){
		//Full Caption Sliding (Hidden to Visible)
		$('.boxgrid.peek').hover(function(){
		$(".cover", this).stop().animate({left:'320px'},{queue:false,duration:600});
			}, function() {
		$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:600});
		});
	});
</script>
		</div>
	</div>
	<!-- //priceArea 05 -->

	<!-- recommendArea 06 -->
	<div class="recommendArea" style="position:absolute; z-index:20; left:640px; top:480px;">
		<div class="cont">


<script type="text/javascript">
$(document).ready(function(){
	$('#tab1').vTicker({showItems:5, speed:400, pause:3000});
	$('#tab2').vTicker({showItems:5, speed:400, pause:3000});
});
</script>

<span class="rc_title"><a href="<%=contextPath %>/recommend/allList.do">Recommend</a></span>

<ul id="tabs">
    <li><a href="#" title="tab1">여성</a></li>
    <li><a href="#" title="tab2">남성</a></li>
</ul>

<div id="tab_content"> 
    <div id="tab1" class="lt">
    <ul>
    <c:forEach var="woman" items="${womanList}">
            <li>
			<table class="tabtable">
			<tr>
				<td width="42">${woman.name}</td>
				<td width="45">${woman.region}</td>
				<td>${woman.height}</td>
				<td align="right">${woman.job}</td>
			</tr>
			</table>
		</li>
		</c:forEach>
      </ul>      
    </div>
    
    <div id="tab2" class="a">
        <ul>
    <c:forEach var="man" items="${manList}">
            <li>
			<table class="tabtable">
			<tr>
				<td width="42">${man.name}</td>
				<td width="45">${man.region}</td>
				<td>${man.height}</td>
				<td align="right">${man.job}</td>
			</tr>
			</table>
		</li>
		</c:forEach>
      </ul>
    </div>
</div>

<script>
$(document).ready(function() {
	$("#tab_content div").hide(); // Initially hide all tab_content
	$("#tabs li:first").attr("id","current"); // Activate first tab
	$("#tab_content div:first").fadeIn(); // Show first tab tab_content
	$('#tab2').vTicker('stop');

    $('#tabs a').click(function(e) {
        e.preventDefault();        
        $("#tab_content div").hide(); //Hide all tab_content
        $("#tabs li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $('#' + $(this).attr('title')).fadeIn(); // Show tab_content for current tab
		if($(this).attr('title')=='tab1'){
			$('#tab2').vTicker('stop');
			$('#tab1').vTicker('next');
		}else{
			$('#tab1').vTicker('stop');
			$('#tab2').vTicker('next');
		}
    });
});
</script>

		</div>
	</div>
	<!-- //recommendArea 06 -->

	<!-- epilogueArea 07 -->
	<div class="epilogueArea" style="position:absolute; z-index:20; left:960px; top:480px;">`
		<div class="cont">
			
<script src="../js/slides.min.jquery.js"></script>
	<script>
		$(function(){
			// Set starting slide to 1
			var startSlide = 0;
			// Get slide number if it exists
			if (window.location.hash) {
				startSlide = window.location.hash.replace('#','');
			}
			// Initialize Slides
			$('#slides').slides({
				preload: true,
				preloadImage: '../img/loading.gif',
				generatePagination: true,
				play: 8000,
				pause: 2500,
				hoverPause: true,
				// Get the starting slide
				start: startSlide,
				animationComplete: function(current){
				// Set the slide number as a hash
				window.location.hash = '#' + current;
				}
			});
		});
	</script>

<div id="slides">
	<div class="slides_container">
		<div class="slide">
			
<!-- 리얼후기 최신글 시작 { -->
<div class="lt">
    <strong class="lt_title">
		Real After	</strong>
	<ul>
      <c:forEach var="success" items="${successList}">
            <li>
            <a href="<%=contextPath %>/successBoard/detail.do?num=${success.num}" style='color:#ffffff'>[성혼후기] ${success.title}</a>			<span class="lt_data"></span>
        </li>
        </c:forEach>
    </ul>
</div>
<!-- } 리얼후기 최신글 끝 -->		</div>

		<div class="slide">
			
<!-- 뉴스 최신글 시작 { -->
<div class="lt">
    <strong class="lt_title">
		공지사항	</strong>
		
	<ul>
		<c:forEach var="common" items="${commonList}">
            <li>
            <a href="<%=contextPath %>/commonBoard/detail.do?num=${common.num}" style='color:#ffffff'>[공지사항] ${common.title}</a>			<span class="lt_data"></span>
        </li>
        </c:forEach>
            </ul>
</div>
<!-- } 뉴스 최신글 끝 -->		
</div>
		
	
	</div>
</div>
			
		
		</div>
	</div>
	<!-- //epilogueArea 07 -->

	<!-- snsArea 08 -->
	<div class="snsArea" style="position:absolute; z-index:20; left:0px; top:800px;">
	

<section id="content_sns">
	<section class="socials">
		<ul class="sns_reset">
			<li><a href="/"><img src="../image/main/sns01.png" alt="홈으로"></a></li>
			<li><a href="http://wedaehan.thesome.com/sub/sub01_05.php"><img src="../image/main/sns02.png" alt="카카오톡" /></a></li>
			<li><a href="http://wedaehan79.blog.me"  target="_blank"><img src="../image/main/sns03.png" alt="네이버블로그" /></a></li>
			<li><a href="#"><img src="../image/main/sns04.png" alt="네이버카페" /></a></li>
			<li><a href="https://www.facebook.com/wedaehanmeeting" target="_blank"><img src="../image/main/sns05.png" alt="페이스북" /></a></li>
			<li><a href="#"><img src="../image/main/sns06.png" alt="즐겨찾기" /></a></li>
		</ul>			
	</section>
</section>
		</div>
	<!-- //snsArea 08 -->

	<!-- iconArea 09 -->
	<div class="iconArea" style="position:absolute; z-index:20; left:320px; top:800px;">
		<div class="cont">
			
<script type="text/javascript" src="../js/icon.js"></script>

<ul class="social" id="jquery">
	<li class="icon01">
		<a href="<%=contextPath%>/member/join.do">
		<p>회원가입</p>
		<strong>회원가입</strong>
		</a>
	</li>
	<li class="icon02">
		<a href="<%=contextPath%>/mainPage/process.do">
		<p>진행절차</p>
		<strong>진행절차</strong>
		</a>
	</li>
	<li class="icon03">
		<a href="<%=contextPath%>/mainPage/price.do">
		<p>비용안내</p>
		<strong>비용안내</strong>
		</a>
	</li>
	<li class="icon04">
		<a href="<%=contextPath %>/eventBoard/list.do">
		<p>스피드데이트</p>
		<strong>스피드데이트</strong>
		</a>
	</li>
	<li class="icon05">
		<a href="<%=contextPath %>/successBoard/list.do">
		<p>리얼후기</p>
		<strong>리얼후기</strong>
		</a>
	</li>
	<li class="icon06">
		<a href="#">
		<p>매칭현황</p>
		<strong>매칭현황</strong>
		</a>
	</li>
</ul>
		</div>
	</div>
	<!-- //iconArea 09 -->

	<!-- realafterArea 03 -->
	<div class="realafterArea" style="background:#fff; position:absolute; z-index:20; left:640px; top:800px;">
		<div class="cont">
			<div class="boxgrid realafter">
	<div class="boxcaption">
		<a href="<%=contextPath %>/successBoard/list.do"><img src="../image/main/box03_img3.png" width="320" height="320" title="Real After"></a>
	</div>
	<img src="i../mage/main/box03_img.png" width="320" height="320" title="Real After">
	<img class="cover" src="../image/main/box03_img2.png" width="320" height="320" title="Real After">
</div>

<script type="text/javascript">
	$(document).ready(function(){
		//Full Caption Sliding (Hidden to Visible)
		$('.boxgrid.realafter').hover(function(){
		$(".cover", this).stop().animate({left:'320px'},{queue:false,duration:600});
			}, function() {
		$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:600});
		});
	});
</script>
		</div>
	</div>
	<!-- //realafterArea 03 -->

	<!-- endArea 11 -->
	<div class="endArea" style="position:absolute; z-index:20; left:960px; top:800px;">
		<div class="cont">
		</div>  
	</div>
	<!-- //endArea 11 -->

</section>
<!-- //contents box -->

		
		<div id="blank">&nbsp;</div>
		</div>
		<!-- //content_list -->

	</div>
	<!-- //contenter_sub -->

<!-- //wrapper -->

<script>
$(document).ready(function(){
  $(window).scroll(function () {
   if ($(this).scrollTop() > 10) { 
        $('#back-top').fadeIn();
   } else {
       $('#back-top').fadeOut();
   }
  });

  $('#back-top').click(function () {
   $('body,html').animate({
        scrollTop: 0
   }, 200);
        return false;
  });
});
</script>

<div id="back-top">
    <a href="#wrap"><img src="../image/all/go_top.png" width="60" height="60" alt="위로가기"></a>
</div>
</body>
</html>